
<template>
<div>
    <Row>
        <Col span="8">
        <Button type="primary" icon="plus-round">添加用户</Button>
        </Col>
    </Row>
    <br/>

	<table-temp @on-delete="handleDel" v-model="usersList" :columnsList="columnsList" @editEvent="showModel">
		<div style="margin: 10px;overflow: hidden">
			<div style="float: right;">
				<Page :total="1" :current="1" @on-change="changePage"></Page>
			</div>
		</div>
	</table-temp>
	<!--// 弹框 -->
	<user-edit :modalShow="modalShow" @on-close="closeModal()"></user-edit>
</div>
</template>

<script>
    import { table1Columns } from '../common/table-heade.js';
    import TableTemp from "../common/layout/table-temp.vue"
    import UserEdit from "./edit-user.vue";


    export default {
        components: {
            UserEdit,
            TableTemp,
        },
        data () {
            return {
                usersList: [],
                columnsList: [],
                modalShow:false
            }
        },

        created () {
            this.columnsList = table1Columns;
            this.fetchData();
        },
        methods:{
            //获取数据
            fetchData(){
                var _this = this;
                this.$axios.get(process.env.API_HOST+'user/list').then(function(response) {
                    if (response.data.code !== 0) {
                        _this.$Message.error(response.data.msg);
                        return false;
                    }else{
                        _this.usersList = response.data.data;
                    }
                    }).catch(function(err) {
                        console.log(err);
                    });
            },
            changePage () {
                this.fetchData();
            },
            handleDel (val, index) {
                this.$Message.success('删除了第' + (index + 1) + '行数据');
            },
			//弹框
            showModel(data){
                setTimeout(() => {
                    this.$nextTick(() => {
                        this.modalShow = true;
                    });
                }, 100);
			},
            //弹框,关闭
            closeModal(){
                this.$nextTick(() => {
                    this.modalShow = false;
                });
			}
        },

    }
</script>
